<script>
import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
import TaskItem from '@/components/TaskItem.vue'
import Condition from '@/components/Condition.vue'
import TaskCodeView from './task/TaskCodeView.vue'
import TaskPreviewView from './task/TaskPreviewView.vue'
import Footor from '@/components/Footor.vue'

export default {
  components: {
    HeaderNav,
    TaskItem,
    TaskContainer,
    Condition,
    TaskCodeView,
    TaskPreviewView,
    Footor,
  },
  data() {
    return {
      showDialog: false,
      showPreviewDialog: false,
      pagination: {
        page: 1,
        rows: 10,
      },
      taskData: null, // 记录点击当前小框的数据，主要用于查看按钮
      condition: {}, // 查询条件
      conditionList: [],
      tasks: [], // 任务列表
      total: 0, // 总记录数
      loading: false, // 加载状态
    }
  },
  methods: {
    // 提交按钮
    handlerCode(task) {
      this.taskData = task;
      this.showDialog = true;
    },
    // 查看按钮
    previewTask(task) {
      this.taskData = task;
      this.showPreviewDialog = true;
    },
    // 开始,完成 按钮
    async changeTask(task) {
      try {
        // const data = task
        // console.log("data:", data)
        await this.$api.start_end_task(task);
        await this.fetchTasks();
      } catch (error) {
        const errorMsg = error.response?.data?.error || error.message || '接口调用失败';
        this.$message.error(`调用接口失败: ${errorMsg}`);
        throw error;  // 重新抛出错误，如果上层需要捕获
      }
    },
    // 保存按钮
    async handleSave() {
      try {
        await this.$refs.TaskCodeViewRef.submitCode();
        this.showDialog = false;
        await this.fetchTasks();
      } catch (error) {
      }
    },
    // 获取筛选条件
    async fetchConditions() {
      this.loading = true;
      try {
        // 调用接口
        const response = await this.$api.check_task();
        this.conditionList = response;
        // console.log("conditionList:", this.conditionList)
      } catch (error) {
        console.error("获取筛选条件失败", error);
        this.$message.error("获取筛选条件失败: " + (error.response?.data?.message || error.message));
      }
    },
    // 调用查询任务接口
    async fetchTasks() {
      this.loading = true;
      try {
        // 构建查询参数
        const params = {
          page: this.pagination.page,
          rows: this.pagination.rows,
          ...this.condition, // 添加筛选条件
        };
        // console.log("this.condition:", this.condition)
        // 调用接口
        const response = await this.$api.select_task(params);
        // console.log("response:", response)
        this.total = response.total;
        this.tasks = response.results; // 假设返回格式包含results字段
        // console.log("tasks:", this.tasks)
      } catch (error) {
        console.error("获取任务列表失败", error);
        this.$message.error("获取任务列表失败");
      } finally {
        this.loading = false;
      }
    },
  },
  created() {
    this.fetchConditions();
    this.fetchTasks();
  },

}
</script>

<template>
  <main class="normal-view">
    <!-- 系统导航 -->
    <HeaderNav active-index="0" class="nav-glass"></HeaderNav>
    <div class="glass-background"></div>

    <div class="content-wrapper">
      <!-- 搜索条件 -->
      <Condition :conditionList="conditionList" v-model="condition"
                 @change-condition="fetchTasks"
                 class="condition-glass"/>

      <!-- 任务列表 -->
      <div class="task-container-glass">
        <div class="task-items">
          <TaskItem v-for="task in tasks"
                    :key="task.id"
                    :id="task.id"
                    :leave="task.completed || '未知'"
                    :langName="task.language.name || ''"
                    :title="task.title ||'未知任务'"
                    :status="task.status"
                    :module-name="task.module?.name || ''"
                    @update:code="handlerCode(task)"
                    @preview:task="previewTask(task)"
                    @start-task="changeTask(task)"
                    @over-task="changeTask(task)"/>
        </div>

        <!-- 添加分页插件 -->
        <div class="pagination-wrapper">
          <el-pagination background layout="prev, pager, next, jumper, total"
                         :page-size="pagination.rows" :pager-count="11" v-model:current-page="pagination.page"
                         :total="total"
                         @size-change="(size) => { pagination.rows = size; fetchTasks(); }"
                         @current-change="fetchTasks"
          />
        </div>
      </div>
    </div>
  </main>

  <Footor></Footor>

  <el-dialog v-model="showDialog" title="任务提交" width="70%" top="5vh">
    <TaskCodeView :task="taskData" ref="TaskCodeViewRef"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button @click="showDialog = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="showPreviewDialog" title="任务预览" width="70%">
    <TaskPreviewView :task="taskData"/>
  </el-dialog>
</template>

<style scoped>
.normal-view {
  min-height: 100vh;
  position: relative;
  background: linear-gradient(135deg, #151824 0%, #1c1f35 100%);
}

.content-wrapper {
  margin: 0 auto;
  padding: 20px 50px;
  position: relative;
  z-index: 1;
}

.glass-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 1px),
  radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  opacity: 0.5;
  z-index: 0;
}

.nav-glass,
.condition-glass,
.task-container-glass {
  backdrop-filter: blur(12px);
  background: rgba(21, 24, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.task-container-glass {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px;
}

.task-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

.task-items > * {
  flex: 1 1 calc(25% - 20px);
  /* 每行展示4个任务 */
  box-sizing: border-box;
  transition: transform 0.3s, box-shadow 0.3s;
}

.task-items > *:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.pagination-wrapper {
	margin-top: 20px;
	display: flex;
	justify-content: center;
}

/* 添加分页样式 */
:deep(.el-pagination) {
	color: white;
	/* 设置页码字体颜色为白色 */
}

:deep(.el-pagination.is-background button),
:deep(.el-pagination.is-background .el-pager li) {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #e6e8f0;
	/* 设置按钮和页码的字体颜色 */
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
	background: rgba(74, 128, 255, 0.2);
	border-color: rgba(74, 128, 255, 0.3);
	color: #7a9dff;
	/* 设置当前页码的字体颜色 */
}

:deep(.el-pagination.is-background button:hover),
:deep(.el-pagination.is-background .el-pager li:hover) {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff !important;
	/* 设置悬停时的字体颜色 */
}
</style>
